import React, {useState, useEffect, useLayoutEffect} from 'react';
import {Descriptions, Drawer, Table} from 'antd';

import {UserApi} from '@api/index'

export default (props) => {

    const [user, setUser] = useState({})
    const [userCode, setUserCode] = useState('')
    const [open, setOpen] = useState(false);

    useEffect(() => {
        setOpen(props.open)
        setUserCode(props.userCode)
    }, [props])

    useEffect(() => {
        getUserDetail()
    }, [userCode])

    const getUserDetail = async () => {
        if(userCode){
            let ret = await UserApi.detail({code:userCode})
            if (ret && ret.code === 200) {
                setUser(ret.data)
            }
        }
    }

    const close = () => {
        setOpen(false)
        props.close && props.close()
    }

    return (
        <Drawer
            title="用户详情"
            placement="right"
            closable={false}
            onClose={close}
            open={open}
        >
            <div className="userInfo">
                <Descriptions column={1}>
                    <Descriptions.Item label="姓名">{user.userName}</Descriptions.Item>
                    <Descriptions.Item label="性别">{user.sexName}</Descriptions.Item>
                    <Descriptions.Item label="手机号码">{user.phone}</Descriptions.Item>
                    <Descriptions.Item label="邮箱">{user.mail}</Descriptions.Item>
                    <Descriptions.Item label="角色">{user.roleNames}</Descriptions.Item>
                </Descriptions>
            </div>
        </Drawer>
    );
};